<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="Bookmark" href="/favicon.ico" >
    <link rel="Shortcut Icon" href="/favicon.ico" />
    <!--[if lt IE 9]>
    <script type="text/javascript" src="__PUBLIC__/admin/lib/html5shiv.js"></script>
    <script type="text/javascript" src="__PUBLIC__/admin/lib/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/admin/static/h-ui/css/H-ui.min.css" />
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/admin/static/h-ui.admin/css/H-ui.admin.css" />
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/admin/lib/Hui-iconfont/1.0.8/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/admin/static/h-ui.admin/skin/default/skin.css" id="skin" />
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/admin/static/h-ui.admin/css/style.css" />
    <!--[if IE 6]>
    <script type="text/javascript" src="__PUBLIC__/admin/lib/DD_belatedPNG_0.0.8a-min.js" ></script>
    <script>DD_belatedPNG.fix('*');</script>
    <![endif]-->
    <script type="text/javascript" src="__PUBLIC__/admin/js/jquery.js"></script>
    <script type="text/javascript" src="__PUBLIC__/admin/js/action.js"></script>
    <script type="text/javascript" src="__PUBLIC__/plugins/xheditor/xheditor-1.2.1.min.js"></script>
    <script type="text/javascript" src="__PUBLIC__/plugins/xheditor/xheditor_lang/zh-cn.js"></script>
    <script type="text/javascript" src="__PUBLIC__/admin/js/jCalendar.js"></script>

    <script type="text/javascript" charset="utf-8" src="__PUBLIC__/admin/kindeditor/kindeditor.js"></script>
    <script charset="utf-8" src="__PUBLIC__/admin/kindeditor/lang/zh_CN.js"></script>
    <script language="javascript">
        var editor;
        KindEditor.ready(function(K) {
            editor = K.create('#intro');
            // editor = K.create('#editor_id');多个
        });
    </script>
    <title>{$title}</title>
    <style type="text/css">
        .float{
            float:left;
            width : 200px;
            height: 200px;
            overflow: hidden;
            border: 1px solid #CCCCCC;
            border-radius: 10px;
            padding: 5px;
            margin: 5px;
        }
        img{
            position: relative;
        }
        .result{
            width: 200px;
            height: 200px;
            text-align: center;
            box-sizing: border-box;
        }


        #file_input{
            display: none;
        }


        .delete{
            width: 200px;
            height:200px;
            position: absolute;
            text-align: center;
            line-height: 200px;
            z-index: 10;
            font-size: 30px;
            background-color: rgba(255,255,255,0.8);
            color: #777;
            opacity: 0;
            transition-duration: :0.7s;
            -webkit-transition-duration: 0.7s;
        }
        .text{float: left}

        .delete:hover{
            cursor: pointer;
            opacity: 1;
        }
        .text_con input{
            width: 400px;
            margin-bottom: 5px;
        }
        .text_sort input{
            width: 200px;
            margin-bottom: 5px;
        }



    </style>

</head>
<body>
<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> {$modules} <span class="c-gray en">&gt;</span> {$title}
</nav>
<div class="page-container">
    <div class="form form-horizontal" >
        <input type="hidden" name="id" id="id" value="{$id}">
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>标题：</label>
            <div class="formControls col-xs-8">
                <input type="text" class="input-text" placeholder="标题" name="title" id="title" value="{$detail.title}" required="required">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>作者：</label>
            <div class="formControls col-xs-8">
                <input type="text" required="required" class="input-text" placeholder="如：张三" name="author" id="author" value="{$detail.author}">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">排序：</label>
            <div class="formControls col-xs-8">
                <input type="text" class="input-text" placeholder="排序，选填，数字越小排名越前" name="sort" id="sort" value="{$detail.sort}">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>图集：</label>
            <div class="formControls col-xs-8">
                <button id="select" style="display: none">(重新)选择图片</button>
                <button id="add">一张或者多张图片</button>
                <input type="file" id="file_input" multiple/>
               <!-- <button id="submit">提交</button>-->
                <div id="box" style="width: 400px;height: auto">
                    <if condition="$image neq ''">
                        <volist name="image" id="v" key="key">
                            <div class="float result_{$key}">
                                <div class="delete" onclick="del_image({$key},{$v.id})">delete</div>
                                <div class="result" style="display: block; padding-top: 44.7917px;">
                                    <img src="__DATA__/{$v.cover}" alt="" width="200">
                                </div>
                            </div>
                            <div class="result_{$key}">
                                <div class="text_con">
                                    <input type="text" class="input-text ggg" id="ff" style="float: left" placeholder="描述" width="200" value="{$v.intro}" disabled>
                                </div>
                            </div>
                            <div class="result_{$key}">
                                <div class="text_sort">
                                    <input type="text" class="input-text" id="ff_0" style="float: left" width="200" placeholder="排序" value="{$v.sort}" disabled>
                                </div>
                            </div>
                        </volist>
                    </if>
                </div>
            </div>
        </div>
        <div class="row cl">
            <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                <button class="btn btn-primary radius" type="button" id="submit">提交</button>
                <input type="hidden" name="id" value="{$detail.id}">
            </div>
        </div>
    </div>
</div>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">


    window.onload = function(){
        var input = document.getElementById("file_input");
        var result;
        var dataArr = []; // 储存所选图片的结果(文件名和base64数据)
        var fd;  //FormData方式发送请求
        var oSelect = document.getElementById("select");
        var oAdd = document.getElementById("add");
        var oSubmit = document.getElementById("submit");
        var oInput = document.getElementById("file_input");

        if(typeof FileReader==='undefined'){
            alert("抱歉，你的浏览器不支持 FileReader");
            input.setAttribute('disabled','disabled');
        }else{
            input.addEventListener('change',readFile,false);
        }　　　　　//handler


        function readFile(){
            fd = new FormData();
            var iLen = this.files.length;
            var index = 0;
            for(var i=0;i<iLen;i++){
                console.log(index);
                if (!input['value'].match(/.jpg|.gif|.png|.jpeg|.bmp/i)){　　//判断上传文件格式
                    return alert("上传的图片格式不正确，请重新选择");
                }
                var reader = new FileReader();
                reader.index = i;
                fd.append(i,this.files[i]);
                reader.readAsDataURL(this.files[i]);  //转成base64
                reader.fileName = this.files[i].name;
                reader.onload = function(e){
                    var imgMsg = {
                        name : this.fileName,//获取文件名
                        base64 : this.result   //reader.readAsDataURL方法执行完后，base64数据储存在reader.result里
                    }
                    dataArr.push(this.result );
                    result = '<div class="delete">delete</div><div class="result"><img src="'+this.result+'" alt=""/></div>';
                    var div = document.createElement('div');
                    div.innerHTML = result;
                    div['className'] = 'float';
                    div['index'] = index;
                    $("#box").append(div);  　　//插入dom树
                    var img = div.getElementsByTagName('img')[0];
                    img.onload = function(){
                        var nowHeight = ReSizePic(this); //设置图片大小
                        this.parentNode.style.display = 'block';
                        var oParent = this.parentNode;
                        if(nowHeight){
                            oParent.style.paddingTop = (oParent.offsetHeight - nowHeight)/2 + 'px';
                        }
                    };
                    //描述
                    $text = "<br><div class='text_con'><input type='text' class='input-text ggg'  id='ff' style='float: left' placeholder='描述' width='200'></div>";
                    var div1 = document.createElement('div');
                    div1.innerHTML = $text;
                    div1['index'] =img;
                    $("#box").append(div1);

                    //排序
                    $text = "<br><div class='text_sort'><input type='text' class='input-text'  id='ff_"+index+"' style='float: left' width='200' placeholder='排序'></div>";
                    var div2 = document.createElement('div');
                    div2.innerHTML = $text;
                    div2['index'] =img;
                    $("#box").append(div2);
                    div.onclick = function(){
                        this.remove();                  // 在页面中删除该图片元素
                        delete dataArr[this.index];  // 删除dataArr对应的数据
                        remove_text(div1);
                        remove_sort(div2);

                    };
                    index++;
                }
            }
        }

        function remove_text(img) {
            img.remove();
            delete dataArr[img];  // 删除dataArr对应的数据// 在页面中删除该图片元素
        }
        function remove_sort(sort) {
            sort.remove();
            delete dataArr[sort];  // 删除dataArr对应的数据// 在页面中删除该图片元素
        }
        function send(){
            var submitArr = [];
            var numArr = [];
            var sortArr = [];
            var title  = $("#title").val();
            var author = $("#author").val();
            var p_sort   = $("#sort").val();
            var p_id =  $("#id").val();
            for (var i = 0; i < dataArr.length; i++) {
                if (dataArr[i]) {
                    submitArr.push(dataArr[i]);
                }
            }
            //获取描述
            var txt = $('.text_con').find(':text');
            for (var j = 0; j < txt.length; j++) {
                numArr.push(txt.eq(j).val()); // 将文本框的值添加到数组中        }
            }
            /*console.log(numArr);*/
            //获取排序
            var sort = $('.text_sort').find(':text');
            for (var k = 0; k < txt.length; k++) {
                sortArr.push(sort.eq(k).val()); // 将文本框的值添加到数组中        }
            }
            console.log(sortArr);
            $.ajax({
                url : "{:U('Works/save')}",
                type : 'post',
                data : {title_1:title,author_1:author,sort_1:p_sort,text:numArr,sort:sortArr,img:submitArr,id:p_id},
                dataType: 'json',
                success : function(data){
                    alert(data.msg);
                    window.location.href="/index.php/Admin/Works";
                }

            })
        }




        /* oSelect.onclick=function(){
         oInput.value = "";   // 先将oInput值清空，否则选择图片与上次相同时change事件不会触发
         //清空已选图片
         $('.float').remove();
         $(".text").remove();
         dataArr = [];
         index = 0;
         oInput.click();
         }*/


        oAdd.onclick=function(){
            oInput.value = "";   // 先将oInput值清空，否则选择图片与上次相同时change事件不会触发
            oInput.click();
        }


        oSubmit.onclick=function(){
            var id = $("#id").val();
            if ( id==0) {
                if(!dataArr.length){
                    return alert('请先选择文件');
                }
            }
            send();
        }
    }
    /*
     用ajax发送fd参数时要告诉jQuery不要去处理发送的数据，
     不要去设置Content-Type请求头才可以发送成功，否则会报“Illegal invocation”的错误，
     也就是非法调用，所以要加上“processData: false,contentType: false,”
     * */


    function ReSizePic(ThisPic) {
        var RePicWidth = 200; //这里修改为您想显示的宽度值

        var TrueWidth = ThisPic.width; //图片实际宽度
        var TrueHeight = ThisPic.height; //图片实际高度

        if(TrueWidth>TrueHeight){
            //宽大于高
            var reWidth = RePicWidth;
            ThisPic.width = reWidth;
            //垂直居中
            var nowHeight = TrueHeight * (reWidth/TrueWidth);
            return nowHeight;  //将图片修改后的高度返回，供垂直居中用
        }else{
            //宽小于高
            var reHeight = RePicWidth;
            ThisPic.height = reHeight;
        }
    }

    /**
     * 修改时移除
     */
    function  del_image(key,id) {
        $(".result_"+key).remove();
        $.ajax({
            url : "{:U('Works/del_img')}",
            type : 'post',
            data : {id:id},
            dataType: 'jsonp',
            success : function(data){
            }

        })
    }



</script>
</body>
</html>
